import {Button, Input, Table} from "antd";
import React from "react";
import {queryGoods} from "@/pages/ActivityManagement/MarketActivity/PackageActivity/service";

export default class EditGoodsTable extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      goodsList: [],
      page: 1,
      limit: 10,
      total: 0,
      name: null,
    };

    const {onSelect} = this.props; // 选定商品 父组件函数

    this.columns = [
      {
        title: '商品名',
        dataIndex: 'name',
        render: (dom, entity) => {
          return <a>{dom}</a>;
        },
      },
      // {
      //   title: '商品数量',
      //   dataIndex: 'num',
      //   // hideInTable: editNum,
      //   render: (dom, entity) => {
      //     return <Input type={'number'} onChange={changeGoodsNum}/>
      //   },
      // },
      {
        title: '类目',
        dataIndex: 'categoryName',
      },
    ];

  }

  componentDidMount() {
    this.handleSearch();
  }


  // 绑定名称搜索框数据
  handleChangeSearchName = (e) => {
    this.setState({
      name: e.target.value,
    });
  };

  // 点击查询按钮
  handleSearchButton = () => {
    this.setState({page: 1}, () => {
      this.handleSearch();
    });
  };

  handleSearch = (e) => {
    this.setState({loading: true});
    const params = {
      page: this.state.page,
      limit: this.state.limit,
      name: this.state.name,
      categoryId: this.props.categoryId,
    };
    queryGoods(params).then(async (res) => {
      this.setState({loading: false});
      this.setState({goodsList: res.data.list});
      this.setState({total: res.data.total});
    });
  };

  // 修改分页参数
  changePage = (page, pageSize) => {
    this.setState({limit: pageSize, page}, () => {
      this.handleSearch();
    });
  }

  render() {
    const {loading, goodsList, page, limit, name, total, } = this.state;
    const {categoryId, editNum = true, onSelect} = this.props;
    const columns = this.columns;

    const pagination = {
      total,
      pageSize: limit,
      current: page,
      onChange: this.changePage
    };

    // table选定相关操作
    const rowSelection = {
      onSelect: onSelect, // 选定一个
      columnTitle: ' ', // 关闭全选功能
    };

    return (
      <div>
        <div className="edit_Table">
          <div className="searchStore">
            <div className="search_div">
              <span>商品名称:</span>
              <Input
                style={{ width: '60%' }}
                onChange={this.handleChangeSearchName}
                placeholder="商品名称"
              />
            </div>

            <Button type="primary" onClick={this.handleSearchButton}>
              查询
            </Button>
          </div>
          <Table
            rowClassName={() => 'editable-row'}
            bordered
            rowKey={(record) => record.id}
            loading={loading}
            dataSource={goodsList}
            columns={columns}
            rowSelection={rowSelection}
            pagination={pagination}
          />
        </div>
      </div>
    );
  };

};
